<template>
  <div id="app">
    <router-view/>

    <!-- 左右箭头，用来跳转页面 -->
    <span class="app-arrow-left" @click="prePage()">&lt;</span>
    <span class="app-arrow-right" @click="nextPage()">&gt;</span>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      pages: ["LoveWall" , "TimerShaft"],
      pageIndex: 0
    };
  },
  methods: {
    // 跳转至下一页
    nextPage() {
      let _this = this;
      if (_this.pageIndex >= ( _this.pages.length - 1 )) {
        _this.pageIndex = 0;
      } else {
        _this.pageIndex ++;
      }
      // 跳转路由
      _this.$router.push( { name: _this.pages[ _this.pageIndex ] } );
    },
    // 跳转至上一页
    prePage() {
      let _this = this;
      if (_this.pageIndex <= 0) {
        _this.pageIndex = _this.pages.length - 1;
      } else {
        _this.pageIndex--;
      }
      
      // 跳转路由
      _this.$router.push( { name: _this.pages[ _this.pageIndex ] } );
    }
  },
  mounted(){
    let _this = this;
    // 确定路由显示的位置
    _this.pageIndex = _this.pages.indexOf(this.$route.name);
  }
};
</script>

<style scoped lang="scss">
#app {
  height: 100%;
  width: 100%;
  font-size: 28px;
  font-family: "楷体";
  position: relative;

  .app-arrow-left {
    float: left;
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 10;
    cursor: pointer;
  }

  .app-arrow-right {
    float: right;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10;
    cursor: pointer;
  }
}
</style>
